<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>글목록</title>
<!-- 테이블 가로줄만 보이게 하기 -->
<style type="text/css">
.tableLine {
	border-top:lightgray 1px solid; border-bottom:lightgray 1px solid; /* 상 하 */
	border-right:lightgray 0px solid;border-left:lightgray 0px solid;}  /* 좌 우 */
	
A:link {text-decoration:none; color:black;} 
A:visited {text-decoration:none; color:black;} 
A:hover {text-decoration:underline; color:#5a5a5a;}

A.n:link {text-decoration:none; color:black;} 
A.n:visited {text-decoration:none; color:black;} 
A.n:hover {text-decoration:underline; color:#FF8200;}
</style>
<script type="text/javascript">
//이미지 크기 비율에 맞게 조절하는 함수
function resize(img){
	   // 원본 이미지 사이즈 저장
	   var width = img.width;
	    var height = img.height;
	   // 가로, 세로 최대 사이즈 설정
	   var maxWidth =130;
	   var maxHeight = 90; 
	   // 가로나 세로의 길이가 최대 사이즈보다 크면 실행  
	    if(width > maxWidth || height > maxHeight){
	      // 가로가 세로보다 크면 가로는 최대사이즈로, 세로는 비율 맞춰 리사이즈
	      if(width > height){
	          resizeWidth = maxWidth;
	          resizeHeight = Math.round((height * resizeWidth) / width);
	      // 세로가 가로보다 크면 세로는 최대사이즈로, 가로는 비율 맞춰 리사이즈
	       }else{
	          resizeHeight = maxHeight;
	          resizeWidth = Math.round((width * resizeHeight) / height);
	       }
	   // 최대사이즈보다 작으면 원본 그대로
	    }else{
	       resizeWidth = width;
	       resizeHeight = height;
	    }
	   // 리사이즈한 크기로 이미지 크기 다시 지정
	    img.width = resizeWidth;
	    img.height = resizeHeight;
	 }
</script>
</head>

<!-- 게시판 이름 (xx 게시판) -->
<body>
	<table width="760"  height="78" background="img/board/title.jpg">
		<tr>
			<td>
				<font color="green">
					<b>&nbsp;&nbsp;&nbsp;${requestScope.lvo.boardName }
					</b>
				</font>
			</td>
		</tr>
	</table>
	<br>
	<br>
	
	<table  width="760" cellpadding="5"  
		style="border-top:lightgray 3px solid;
					border-bottom:lightgray 3px solid;
					border-collapse:collapse;
					font-size: 10pt;">
		<tr CLASS="tableLine"  align="center"
			style="background-color:#f6f6f6;">
			<td width="10%"></td>
			<td width="50%">제목</td>
			<td width="15%" align="left">작성자</td>
			<td width="15%">작성일</td>
			<td width="10%">조회</td>
		</tr>
		<tr>
			<td colspan="5">
				<table cellpadding="3" >
					<c:forEach var="bvo" items="${requestScope.lvo.list}" varStatus="stat">	
						<c:if test="${stat.count%5==1 }">
							<tr>
						</c:if>
						<td width="140px">
							<table style="table-layout: fixed;" width=140px>
								<tr><td style="
									border-top:lightgray 1px solid;
									border-bottom:lightgray 1px solid;
									border-left:lightgray 1px solid;
									border-right:lightgray 1px solid;"
									height="100px"
									align="center"
									>
									<a href="board.do?command=showContent&no=${bvo.content_no }&kind=${param.kind }&view=${param.view }">
									<img src="upload/${bvo.newfilename }" onload="resize(this)"></a></td></tr>
								<tr>
									<td style="text-overflow : ellipsis; overflow : hidden;">
									<nobr>
											<a href="board.do?command=showContent&no=${bvo.content_no }&kind=${param.kind }&view=${param.view }">${bvo.title }</a> 
											<c:if test="${bvo.refly_count>0 }"><!-- 덧글이 달려있으면 덧글 수 출력 -->
												<font size="1" color=#DB631F>[<b>${bvo.refly_count }</b>]</font>
											</c:if>
									</nobr>
									</td>
								</tr>
								<tr><td><font color="#828282" size="2px">조회 ${bvo.count } | ${bvo.writeDate }</font></td></tr>
								<tr><td><font color="#5a5a5a" size="2px">${bvo.nick }</font></td></tr>
							</table>
						</td>
						<c:choose>
							<c:when test="${stat.count%5==0 }">
								</tr>
							</c:when>
							<c:when test="${stat.count==fn:length(requestScope.lvo.list) }">
								<c:if test="${stat.count%5!=0 }">
									</tr>
								</c:if>
							</c:when>
						</c:choose>
					</c:forEach>
				</table>
			</td>
		</tr>

		<tr CLASS="tableLine">
			<td colspan="5" align="right">
				<!-- 글쓰기 버튼 -->
				<a href="board.do?command=writeView&board_no=${param.board_no }&kind=${param.kind }&view=${param.view }"><img alt="글쓰기" src="img/board/write_btn.jpg" border="0"></a>
			</td>
		</tr>
	</table>
	<br>
	<center>
	<!-- 페이징 처리 -->	
	<%-- 이전 페이지 그룹이 있으면 이미지 보여준다.
		   이미지 링크는 현 페이지 그룹 시작페이지 번호 -1 =>
		   이전 페이지 그룹의 마지막 페이지 번호로 한다. 
	 --%>
	 <c:if test="${requestScope.lvo.pagingBean.previousPageGroup}">
	 <a href=
	 "board.do?command=list&board_no=${param.board_no }&pageNo=${requestScope.lvo.pagingBean.
	 startPageOfPageGroup-1}&kind=${param.kind }&view=${param.view }"><img src="img/board/left_arrow_btn.gif"></a>
	 </c:if>
	<%-- PagingBean 을 이용해서 현재 페이지에 해당되는 페이지그룹의
		   시작페이지~~마지막페이지까지 화면에 보여준다. 
		   이 때 현재 페이지를 제외한 나머지 페이지는 링크를 걸어
		   해당 페이지에 대한 게시물 리스트 조회가 가능하도록 한다. 
	 --%>	
	<c:forEach var="i" 
	begin="${requestScope.lvo.pagingBean.startPageOfPageGroup}"
	 end="${requestScope.lvo.pagingBean.endPageOfPageGroup}">
	 <c:choose>
	 <c:when test="${requestScope.lvo.pagingBean.nowPage!=i}">
	 <a class="n" href="board.do?command=list&board_no=${param.board_no }&pageNo=${i}&kind=${param.kind }&view=${param.view }">${i}</a>
	 </c:when>
	 <c:otherwise>
	<b><font color="#DB631F" style="text-decoration: underline;">${i}</font></b>
	</c:otherwise>
	</c:choose>
	</c:forEach>
	<%-- 다음 페이지 그룹이 있으면 화살표 이미지를 보여준다.
			이미지 링크는 현재 페이지 그룹의 마지막 번호 + 1 => 
			다음 그룹의 시작 페이지로 링크한다. 
			right_arrow_btn.gif
	 --%>
	 <c:if test="${requestScope.lvo.pagingBean.nextPageGroup}">
	 <a href=
	 "board.do?command=list&board_no=${param.board_no }&pageNo=${requestScope.lvo.pagingBean.
	 endPageOfPageGroup+1}&kind=${param.kind }&view=${param.view }">
	 <img src="img/board/right_arrow_btn.gif">
	 </a>
	 </c:if>	 
	 </center>
</body>
</html>
